<template>
    <a-modal
        :open="open"
        :title="title"
        @ok="handleSubmit"
        @cancel="handleCancel"
        ok-text="确定"
        cancel-text="取消"
        width="720px"
    >
        <a-form :model="formDataCopy" ref="formRef" :rules="formRules" :label-col="labelCol" :wrapper-col="wrapperCol" class="form-list">
            <a-form-item label="知识库名称" :required="true" name="name">
                <a-input v-model:value="formDataCopy.name" placeholder="请输入知识库名称"  style="width: 200px" :disabled="formDataCopy.datasetId" />
            </a-form-item>
            <a-form-item label="知识库描述" name="describe">
                <a-textarea v-model:value="formDataCopy.describe" placeholder="请输入知识库描述"  style="width: 400px;height: 120px" :disabled="formDataCopy.datasetId" />
            </a-form-item>

            <a-form-item label="分类" name="permission">
                <a-radio-group v-model:value="formDataCopy.permission" button-style="solid">
                    <a-radio-button value="only_me">仅自己可见</a-radio-button>
                    <a-radio-button value="all_team_members">所有团队成员</a-radio-button>
<!--                    <a-radio-button value="custom">自定义</a-radio-button>-->
                </a-radio-group>
            </a-form-item>
<!--            <a-form-item label="外部共享" name="shareStatus">-->
<!--                <a-radio-group v-model:value="formData.shareStatus">-->
<!--                    <a-radio :value="1">是</a-radio>-->
<!--                    <a-radio :value="0">否</a-radio>-->
<!--                </a-radio-group>-->
<!--            </a-form-item>-->
            <a-form-item label="应用秘钥"  name="knowledgeAppId" v-if="formDataCopy.datasetId">
                <a-input v-model:value="formDataCopy.knowledgeAppId" placeholder="请输入应用秘钥"  style="width: 200px" />
                <a-tooltip>
                    <template #title>AI应用的api-key</template>
                    <QuestionCircleFilled style="margin-left: 10px" />
                </a-tooltip>
            </a-form-item>
            <a-form-item label="是否发布" name="publish" v-if="!formDataCopy.datasetId">
                <a-switch v-model:checked="formDataCopy.publish"/>
            </a-form-item>
        </a-form>
    </a-modal>
</template>

<script setup>
import {ref,watch} from 'vue';
import {defineProps, defineEmits} from 'vue';
import KnowledgeBaseManage from "@/common/api/knowledge/knowledgeBaseManage";

const props = defineProps({
    title: {
        type: String,
        default: "新增知识库"
    },
    open: {
        type: Boolean,
        default: false
    },
    // 表单数据
    formData: {
        type: Object,
        default: {}
    }
});

const emits = defineEmits(['cancel', 'submit']);

// 表单引用
const formRef = ref(null);
// 设置label和value距离
const labelCol = {style: {width: '150px'}};
const wrapperCol = {span: 20};
// 表单验证规则
const formRules = {
    name: [
        {required: true, message: '知识库名称不能为空', trigger: 'blur'}
    ],
};
const formDataCopy = ref({});
const initFormData = () => {
    formDataCopy.value = JSON.parse(JSON.stringify(props.formData))
};

// 监听打开状态初始化数据
watch(() => props.open, (newVal) => {
    if (newVal) {
        initFormData();
        console.log(formDataCopy)
    }
}, );
// 取消按钮点击事件处理函数
const handleCancel = () => {
    formRef.value?.resetFields();
    emits('cancel');
};

// 提交按钮点击事件处理函数
const handleSubmit = async () => {
    const form = formRef.value;
    if (form) {
        try {
            // 验证表单
            await form.validate();
            let result = await KnowledgeBaseManage.save(formDataCopy.value)
            if (result.success) {
                emits('submit', formDataCopy.value);
                handleCancel();
            }
        } catch (error) {
            console.log('表单验证失败', error);
        }
    }
};
</script>

<style scoped>
.form-list {
    margin: 30px 0 0;
}
</style>
